<template>
  <div class="register">
    <div class="login-container">
       <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <h3 class="title">邮箱注册</h3>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="phone">
            <el-row>
              <el-input v-model="formData.phone" type="text" placeholder="请输入邮箱"></el-input>
            </el-row>
            <el-row style="margin-top:10px;">
              <el-button type="primary" :disabled="codeDisabled" @click="sendCode">{{codeBtnText}}</el-button>
            </el-row>
        </el-form-item>
        <el-form-item label="验证码" prop="verify">
          <el-input v-model="formData.verify" type="text" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" :type="pwdInputType" placeholder="请输入密码">
            <span @click="togglePwd" slot="append" class="svg-container" style="cursor:pointer;">
                <svg data-v-22425877="" aria-hidden="true" class="svg-icon">
                    <use data-v-22425877="" xlink:href="#icon-eye">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 64" id="icon-eye"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"></path></svg>
                    </use>
                </svg>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item label="邀请码" :required="false">
          <el-input v-model="formData.inviteCode" type="text" placeholder="邀请码可不填"></el-input>
        </el-form-item>
        <el-row class="agreement">
          <div style="color: rgb(64, 158, 255); cursor: pointer;">
            <el-checkbox v-model="checked"></el-checkbox>
            <span @click="dialogVisible = true">用户注册协议</span>
          </div>
        </el-row>
        <el-row class="visitor">
            <el-col>
                <el-button @click="register" type="primary">注册</el-button>
            </el-col>
        </el-row>
        <el-row class="visitor">
            <el-col>
                <el-button @click="visitorExp" type="default">游客体验(免费体验)</el-button>
            </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog
      title="用户注册协议"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose">
      <strong>这是 <i>HTML</i> 片段</strong>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
let codeTimer
export default {
  name:'register',
  data:()=>({
    checked:true,
    codeDisabled:false,
    codeBtnText:'发送验证码',
    pwdInputType:'password',
    dialogVisible:false,
    formData:{
      phone:'',
      verify:'',
      password:'',
      inviteCode:''
    },
    rules: {
      phone: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
      ],
      verify: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '验证码格式不正确', trigger: 'blur' }
      ],
      password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码长度在应在 6 到 5 个字符', trigger: 'blur' }
      ]
    }
  }),
  methods:{
    togglePwd(){
        if(this.pwdInputType=='password'){
            this.pwdInputType='text'
        }else{
            this.pwdInputType='password'
        }
    },
    //发送验证码
    sendCode(){
      let s=59
      if (this.formData.phone.length) {
        this.sendSMS()
        codeTimer = setInterval(() => {
          this.codeDisabled = true;
          s -= 1;
          this.codeBtnText = `${s}秒后重新获取`;
          if (s == 0) {
            this.codeDisabled = false;
            this.codeBtnText = "获取验证码";
            clearInterval(codeTimer);
          }
        }, 1000);
      } else {
        this.$message.error("邮箱号码不合法");
      }
    },
    sendSMS(){

    },
    register(){
      if(!this.checked){
        this.$message.error("请先同意注册协议");
        return
      }
      this.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
            alert('submit!');
        } else {
            console.log('error submit!!');
            return false;
        }
      });
    },
    handleClose(){},
    visitorExp(){
      this.$router.push({
        path:'/exam/index',
        query:{visitor:1}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
    box-sizing: border-box;
    margin: 30px auto;
    width: 500px;
    max-width: 95%;
    background: #fff;
    border: 1px solid #eaeaea;
    -webkit-box-shadow: 0 0 25px #cac6c6;
    box-shadow: 0 0 25px #cac6c6;
    padding: 28px;
    color: #333;
    border-radius: 15px;
    .title{
      font-size: 26px;
      font-weight: 400;
      color: #333;
      margin: 0 auto 30px;
      text-align: center;
      font-weight: 700;
  }
  .svg-container {
    line-height: 30px;
    color: #889aa4;
    vertical-align: middle;
    display: inline-block;
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -.15em;
        fill: currentColor;
        overflow: hidden;
    }
  }
  .agreement{
    margin-left: 25px;
    & span{
      margin-left: 8px;
      font-weight: 700;
    }
  }
  .visitor {
      margin: 20px 0;
      .el-button{
          width:100%;
      }
  }
}
</style>
